<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" :offset="1"><div class="grid-content ep-bg-purple" />
        <el-card class="box-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>模板一</span>
              <el-button class="button" type="success" plain><el-icon><Check /></el-icon></el-button>
            </div>
          </template>
          <div class="text item">温度：28℃</div>
          <div class="text item">湿度：60%</div>
          <div class="text item">时间：12:00</div>
          <div class="photo1">
            <img src="@/static/muban.jpg" style="width: 130px; height: 130px" >
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="2"><div class="grid-content ep-bg-purple" />
        <el-card class="box-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>模板二</span>
              <el-button class="button" type="success" plain><el-icon><Check /></el-icon></el-button>
            </div>
          </template>
          <div class="text item">时间：18:28</div>
          <div class="photo2">
            <img src="@/static/muban2.jpg" style="width: 150px; height: 80px" >
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>

</template>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 380px;
}

el-row {
  margin-bottom: 4px;
}

el-row:last-child {
  margin-bottom: 0;
}

el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 30px;
}
.photo1{
  padding-left: 200px;
  margin-top: -120px;
  align-items: end;
  display: block;
}
.photo2{
  padding-left: 180px;
}
</style>
<script setup>
import {Check} from "@element-plus/icons-vue";
</script>